<template>
  <aside class="left-menu">
    <el-menu
      mode="vertical"
      @select="handleSelect"
      style="border-right: 0;background-color: transparent;"
      :default-active="active"
      
    >
      <el-menu-item index="info">
        <img
          :src="userinfo.avatar || '/assets/avatar/default.jpg'"
          alt="User Avatar"
          style="height: 34px; border-radius: 50%; margin-right: 10px"
        />
        <span>{{ userinfo.username }}</span>
      </el-menu-item>
      <router-link to="/index"
        ><el-menu-item index="index"><i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -225px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >首页</el-menu-item></router-link
      >
      <el-menu-item index="contact"><i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -37px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >关注</el-menu-item>
      <el-menu-item index="求助打听">
        <i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -185px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >求助打听</el-menu-item
      >
      <el-menu-item index="投稿爆料">
        <img
          :src="'/assets/icon2.jpg'"
          style="height: 34px; border-radius: 50%; margin-right: 10px"
        />
      投稿爆料</el-menu-item>
      <el-menu-item index="社团招新"> <i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -148px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >社团招新</el-menu-item>
      <el-menu-item index="二手闲置"><i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -406px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >二手闲置</el-menu-item>
      <el-menu-item index="代拿代办"><i
          style="
            background-image: url(/assets/icon.jpg);
            background-position: 0px -259px;
            background-size: auto;
            width:36px;
            height: 36px;
            margin-right: 10px;
          "
        ></i
        >代拿代办</el-menu-item>
    </el-menu>
  </aside>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import userStore from "../store/index";
import { useRouter } from "vue-router";
import api from "../utils/index.js"; // 引入 axios 实例
const active = ref("index");
const userStoreInfo = userStore();
const user = userStoreInfo.getUser();
const userinfo = ref({});
const router = useRouter();
// 获取用户信息和联系人
const fetchUserInfo = async () => {
  try {
    const response = await api.get(`/users?id=${user.id}`);
    userinfo.value = response.data[0];
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

// 处理菜单选择
const handleSelect = (index) => {
  if (index == "info") {
    router.push({ path: "/userinfo" });
    return;
  }
  router.push({
    path: "/index",
    query: {
      section: index,
    },
  });
};

// 初始化数据
onMounted(async () => {
  await fetchUserInfo();
});
</script>
<style scoped>
.left-menu {
  background-color: transparent;
  padding: 20px;
  width: 280px;
}
.el-menu-item:hover {
  background-color: #bababa; /* 鼠标悬停时背景变为灰色 */
  border-radius: 10px;
}
.el-menu-item {
  width: 100%;
  border-radius: 8px;
  margin: 4px 0;
  padding: 12px 16px !important;
  transition: background-color 0.2s ease;
}
</style>
